<template>
    <div>
        <Header></Header>
        <div class="schoolBox" :style="{'background':(styles ? styles : '#1876d2')}">
            <div v-if="!isShowManagement" class="bannerBox">
                <swiper :options="swiperOption" v-if="imgList.length>0" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in imgList" :key="index">
                        <img :src="item.imgUrl"  style="width:100%" />
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                </swiper>

                <div class="className">
                    <h1>{{ otherUserInfo.name || otherUserInfo.schoolName}}</h1>
                </div>

                <!-- <div class="searchName">
                    <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search">搜索</el-button>
                    </el-input>
                </div> -->

            </div>

            <div v-if="!isShowManagement" class="classNav">
                <div class="nva">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
                        :router="true"
                        v-if="active">
                        <el-menu-item index="/school/schoolHomePage">学校首页</el-menu-item>
                        <el-submenu :index="item.routerTo" v-for="item in menuTabList" :key="item.routerTo">
                            <template slot="title">{{item.name}}</template>
                            <el-menu-item :index="item.routerTo" v-if="item.children == null">{{item.name}} </el-menu-item>
                            <el-menu-item :index="itemIn.routerTo" v-for="itemIn in item.children" :key="itemIn.routerName">{{itemIn.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                    <el-menu default-active="" v-else>
                </el-menu>
                </div>
            </div>

            <div v-if="!isShowManagement" class="content">
                <router-view :menuTabList='menuTabList' :activeMenuIndex='activeMenuIndex' ref="schoolSummarized"
                @changeLeftMenu="changeLeftMenu"/>
            </div>

            <div v-if="isShowManagement" class="managementList">
                <SchoolManagement :menuTabList='menuTabList' :activeMenuIndex='activeMenuIndex'
                :isClassSchool='isClassSchool'></SchoolManagement>
            </div>

        </div>
    </div>

</template>

<script>
    import SchoolManagement from "@c/managementList/schoolManagementList"
    import Header from "@c/Header/head";
    import {mapState} from 'vuex'
    export default {
        components: {
            SchoolManagement,
            Header
        },
        computed:{
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        watch:{
            routerPath(val,old){
                if(old == '/school/schoolHomePage' && val !='/school/schoolHomePage'){
                    this.$refs.schoolSummarized.initMenu
                }
            }
        },
        created() {
            this.menuTab(1)
        },
        mounted() {

        },
        data() {
            return {
                active: true,
                routerPath:'',
                openeds:['/school/teachersGarden/teachersPost'],
                isChStShow: true, //是否显示空间装扮控制
                styles: '#f1f1f1',
                input3: "",
                menuTabList:{},
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 3,
                    centeredSlides: true,
                    effect: "fade",
                    paginationClickable: true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {
                        }
                    }
                },
                imgList: [{
                        id: '001',
                        imgUrl: require("../../../assets/img/banner.jpg")
                    },
                    {
                        id: '002',
                        imgUrl: require("../../../assets/img/banner2.jpg")
                    },
                    {
                        id: '003',
                        imgUrl: require("../../../assets/img/banner3.jpg")
                    },
                    {
                        id: '004',
                        imgUrl: require("../../../assets/img/banner4.jpg")
                    }
                ],
                activeIndex: '/school/schoolHomePage',
                activeMenuIndex: '',
                isClassSchool: 'school'
            }
        },
        methods: {
            changeLeftMenu(params){
                this.active = false
                this.$nextTick(()=>{
                    this.activeIndex = params
                    this.active = true
                })
            },
            menuTab(params){
                this.$store.dispatch('commonModule/menuTab',{
                    type: params
                }).then( res =>{
                    if(res.data.code =200){
                        this.menuTabList = res.data.result
                    }
                })
            },

            changeStyleFn(payload) {
                this.styles = payload;
            },

            handleSelect(key, keyPath) {
                this.routerPath = key
                this.activeMenuIndex = key
            },
        }

    }
</script>

<style lang="scss" scoped>
    .schoolBox {
        .header {
            width: 100%;
            background-color: #409EFF;

            .headerInner {
                width: 81%;
                margin: 0 auto;
                color: wheat;

                h3 {
                    float: left;
                    color: white;
                }

                .management {
                    float: right;
                    margin-top: 12px;

                    .search {
                        float: left;
                        width: 400px;
                        margin-right: 40px;
                    }

                    .setUpThe {
                        margin-top: 10px;
                        float: left;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        -khtml-user-select: none;
                        user-select: none;

                        label {
                            color: white;
                            margin-right: 20px;
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }

        .bannerBox {
            width: 100%;
            overflow: hidden;
            position: relative;

            .className {
                position: absolute;
                top: 50%;
                left: 10%;
                z-index: 999;
                text-align: left;
                color: white;
                background-color: rgba(64, 158, 255, .6);
                padding: 0 20px;
                border-radius: 10px;
            }

            .searchName {
                position: absolute;
                top: 10%;
                right: 10%;
                z-index: 999;
                text-align: left;
                color: white;
                // background-color: rgba(64, 158, 255,.6);
                padding: 0 20px;
                border-radius: 10px;

                .input-with-select {
                    width: 350px;
                }
            }
        }

        .classNav {
            box-sizing: border-box;
            width: 100%;
            background-color: white;

            .nva {
                width: 81%;
                margin: 0 auto;
            }
        }

        .content {
            width: 81%;
            margin: 0 auto;
        }

        .managementList {
            width: 100%;
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>